{% if data.package.installedAt %}
    <div class="bc-full sm:bc-w-2/3">
        {% embed "system/embed/card/card-with-title.html.twig" with {contentSpacing: false} %}
            {% import "system/macro/card/card-heading.html.twig" as card_heading %}

            {% block header %}
                {{ card_heading.component({
                    title: localized.headline.uninstall,
                }) }}
            {% endblock %}

            {% block content %}
                {% embed "system/embed/form-row.html.twig" %}
                    {% import "system/macro/form-component/button-danger.html.twig" as button_danger %}

                    {% block label %}
                        <span class="brlbs-cmpnt-text">{{ localized.field.uninstallPackage | raw }}</span>
                    {% endblock %}

                    {% block input %}
                        {{ button_danger.component({
                            button: localized.button.uninstall,
                            dataAttribute: "data-brlbs-modal-target=\"borlabsModalUninstall-#{data.package.id }\"",
                        }, localized) }}

                        {% embed "system/embed/modal/modal.html.twig" with {
                            action: wpNonceUrl("?page=#{controllerId}&action=uninstall&id=#{data.package.id}", "#{controllerId}-#{data.package.id}-uninstall"),
                            buttonText: localized.button.uninstall,
                            id: 'borlabsModalUninstall-' ~ data.package.id,
                            title: localized.headline.uninstallPackage,
                        } %}
                            {% block description %}
                                <p class="bc-mb-4 bc-text-sm">{{ localized.text.confirmUninstallPackage | raw }}</p>
                                <p class="bc-text-sm"><strong>{{ localized.text.package | raw }}
                                        :</strong> {{ data.package.name }}</p>
                            {% endblock %}
                        {% endembed %}
                    {% endblock %}
                {% endembed %}
            {% endblock %}
        {% endembed %}
    </div>
{% endif %}
